@require '~styles/variables'
@require '~styles-lib/mixins'

$-item-size = 95px
$-bubble-size = $-item-size * 0.25

.-item
	display: inline-block
	width: $-item-size
	height: $-item-size

.-pressy
	display: inline-block
	width: 100%
	height: 100%

	&:hover
		transform: scale(1.05)

	pressy()

.-img
	img-circle()
	width: 100%
	height: 100%
	border: 3px solid
	cursor: pointer
	theme-prop('border-color', 'gray')

.-followed
	position: static

	div
		position: relative
		top: -($-bubble-size)
		left: $-item-size - $-bubble-size
		width: $-bubble-size
		height: $-bubble-size
		border-radius: 50%

	.-icon
		position: absolute
		top: 2px
		left: -1px
		margin: 0
		width: 100%
		text-align: center
		font-size: 20px
		color: $white

.-name
	text-overflow()
	font-size: $font-size-small
	text-align: center
